<template>
  <header class="issues-header">
    <div class="header-box">
      <div class="search-content">
        <div class="search-box">
          <div class="input-search">
            <el-input
              @input="handleInput"
              :suffix-icon="Search"
              v-model="issuesTitle"
              placeholder="搜索Issue"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <el-button color="#6C52EA" icon="Plus" @click.stop="handleAddClick"> 新建Issue </el-button>
    </div>
  </header>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Calendar, Search } from '@element-plus/icons-vue'

/**
 * @desc: 标题搜索
 */
const issuesTitle = ref('')
const emit = defineEmits(['send-input-change'])
const handleInput = () => {
  emit('send-input-change', issuesTitle.value)
}

/**
 * @desc: 新建问题
 */
const $router = useRouter()
const handleAddClick = () => {
  $router.push({
    name: 'CreateIssues'
  })
}
</script>

<style lang="less" scoped>
.issues-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  .header-box {
    display: flex;
    .issues-icon{
      width: 30px;
      height: 30px;
    }
  }
  .department-select {
    .el-select {
      width: 110px;
    }
  }
  .search-content {
    display: flex;
    justify-content: space-between;
    .search-box {
      display: flex;
      align-items: center;
      .el-select {
        width: 110px;
      }
      .input-search {
        .el-input {
          width: 500px;
          padding-left: 10px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
